import { Form, Input, Space } from "antd";
import React, { useEffect } from "react";
import styled from "styled-components";
import { Button, message } from "antd";
import Title from "../components/Title";
import api from "../../api";
//import './index.scss'
const BoxStyle = styled.div`
  margin-left: 500px;
  width: 100%;
  height: 100vh;
  padding: 30px 100px;
  /* display: flex;;
  flex-direction: column;
  justify-content: start;
  align-items: center; */
`;

export default function XxwhManage() {
  const userId = Number(localStorage.getItem("userId"));
  const [form] = Form.useForm();
  const onFinish = (values) => {
    api.xxwh({ ...values, userId: userId }).then((res) => {
      if (res.success) {
        message.success("修改成功");
      } else {
        message.error(res.message || "修改失败");
      }
    });
  };

  // 定义表单校验规则
  const rules = {
    username: [
      { required: true, message: "请输入用户名", trigger: "blur" },
      { min: 5, max: 16, message: "长度为5~16位非空字符", trigger: "blur" },
    ],
    password: [
      { required: true, message: "请输入密码", trigger: "blur" },
      { min: 5, max: 16, message: "长度为5~16位非空字符", trigger: "blur" },
    ],
  };

  useEffect(() => {
    // 获取用户信息
    api.xlxxDetail({ userId }).then((res) => {
      if (res.success) {
        form.setFieldsValue(res.data);
      } else {
        message.error(res.message || "获取用户信息失败");
      }
    });
  }, [userId]);
  return (
      <div className="css">
    <BoxStyle className="BoxStyle">
      <Title title={"信息维护"}></Title>
      <Form onFinish={onFinish} form={form}>
        <Space direction="vertical">
          <Form.Item label="用户名" name="username" rules={rules.username}>
            <Input allowClear />
          </Form.Item>
          <Form.Item label="密码" name="password" rules={rules.password}>
            <Input.Password allowClear />
          </Form.Item>
          <Form.Item
            label="用户所属公司"
            name="companyName"
            rules={[{ required: true, message: "所属公司不能为空" }]}
          >
            <Input allowClear />
          </Form.Item>
          <Form.Item label="用户姓名" name="name">
            <Input allowClear />
          </Form.Item>
          <Form.Item label="用户邮箱" name="email">
            <Input allowClear />
          </Form.Item>
          <Form.Item label="用户电话" name="phone">
            <Input allowClear />
          </Form.Item>

          {/* 修改 按钮*/}
          <Form.Item>
            <Button type="primary" htmlType="submit">
              修改
            </Button>
          </Form.Item>
        </Space>
      </Form>
    </BoxStyle>
      </div>
        );
}
